<template>
    <el-row :gutter="20">
        <el-col :span="20" style="border: 2px solid #f1f1f2;">
            <div class="grid-content ep-bg-purple">
                <el-row>
                    <el-col :span="10">
                        <div class="grid-content ep-bg-purple user-par-leftside">
                            <div class="user-main">
                                <div class="user-left">
                                    <el-avatar shape="square" :size="80"
                                        :src="`http://xawn.f3322.net:8002/distremote/static/avatar/${state.data1.avatar}`" />
                                </div>
                                <div class="user-right">
                                    <h2>{{textState}}，{{state.data1.username}}，{{quote}}</h2>
                                    <p>{{String(state.roles)}}</p>
                                    <p>上次登录时间：{{state.data1.lastLoginTime}}</p>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="grid-content ep-bg-purple-light user-par-rightside">
                            <div class="user-rightside">
                                <p>今日IP</p>
                                <p style="color:#1990ff;">{{state.numData.todayIp}}</p>
                            </div>
                            <div class="user-rightside">
                                <p>今日访问</p>
                                <p style="color:#1990ff;">{{state.numData.todayVisitCount}}</p>
                            </div>
                            <div class="user-rightside">
                                <p>总访问量</p>
                                <p style="color:#1990ff;">{{state.numData.totalVisitCount}}</p>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="20" style="border: 2px solid #f1f1f2;">
        <el-col :span="10" style="border-right: 2px solid #f1f1f2;">
            <div class="grid-content ep-bg-purple">
                <h4 style="margin: 10px 30px;">近七日系统访问记录</h4>
                <div id="char" style="width: 100%; height: 400px"></div>
            </div>
        </el-col>
        <el-col :span="10">
            <div class="grid-content ep-bg-purple">
                <h4 style="margin: 10px 30px;">进行中的项目</h4>
            </div>
        </el-col>

    </el-row>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onBeforeMount, onMounted, reactive, ref } from "vue";
import { getDataNumberApi } from '../apis/user'
import { ECharts, EChartsOption, init } from 'echarts';
import { max } from 'lodash';
const state = reactive({
    numData: {} as any,
    // deptData:
    data1: JSON.parse(localStorage.getItem('user') as any),
    roles: JSON.parse(localStorage.getItem('roles') as any),
    all: [] as any
});

var all: any[][] = [['product', '总量', '您']]
// const all: any = ref([])
async function getDataNum() {
    const res = await getDataNumberApi();
    console.log(res.data);
    state.numData = res.data
    console.log(res.data.lastSevenUserVisitCount);
    console.log(res.data.lastSevenVisitCount.map((item: any) => {
        return all.push([item.days, item.count])
    }));
    console.log(res.data.lastSevenUserVisitCount.map((item: any, index: any) => {
        return all[index + 1].push(item.count)
    }));
    console.log(all);

}

let getTimeState = () => {
    // 获取当前时间
    let timeNow = new Date();
    // 获取当前小时
    let hours = timeNow.getHours();
    // 设置默认文字
    let text = ``;
    // 判断当前时间段
    if (hours >= 0 && hours <= 10) {
        text = `早上好`;
    } else if (hours > 10 && hours <= 14) {
        text = `中午好`;
    } else if (hours > 14 && hours <= 18) {
        text = `下午好`;
    } else if (hours > 18 && hours <= 24) {
        text = `晚上好`;
    }
    console.log(`hours >>>>>`, hours);
    console.log(`text >>>>`, text);
    // 返回当前时间段对应的状态
    return text;
};

let textState = getTimeState()


var a = Math.random() + "" //产生一个随机数

var rand1: any = a.charAt(5) //的到这个数的第五个字符(实际还是从0~9的数字)

var quotes = new Array //创建消息数组

quotes[1] = '今天吃了什么好吃的呢' //这里分配十句随机出现的文本

quotes[2] = '今天帮助别人解决问题了吗'

quotes[3] = '要不要和朋友打局LOL'

quotes[4] = '准备吃些什么呢'

quotes[5] = '要不要和朋友打局王者荣耀'

quotes[6] = '今天您微笑了吗😊'

quotes[7] = '今天又写了几个Bug🐞呢'

quotes[8] = '周末要不要去看电影？'

quotes[9] = '今天在群里吹水了吗'

quotes[0] = '今天休息了吗'

var quote = quotes[rand1] //由随机数选择一句话


onBeforeMount(() => {
    getDataNum();
})
onMounted(() => {
    const charEle = document.getElementById('char') as HTMLElement;
    // console.log()
    const charEch: ECharts = init(charEle);
    setTimeout(() => {
        const option: EChartsOption = {
            legend: {},
            tooltip: {},
            dataset: {
                source: all
            },
            xAxis: { type: 'category' },
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [{
                type: 'bar', markPoint: {
                    data: [
                        {
                            type: 'max', name: "最大值"
                        }
                    ]
                },
                barWidth:"30%"
            }, {
                type: 'bar', markPoint: {
                    data: [
                        {
                            type: 'max', name: "最大值"
                        }
                    ]
                },
                barWidth:"30%"
            }]
        };
        charEch.setOption(option);
    }, 500);
});

</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
    width: 99vw;
}

.el-row:last-child {
    margin-bottom: 0;
    width: 99vw;
}

.el-col {
    border-radius: 1px;
    /* border: 1px solid #f1f1f2; */
    /* background-color: brown; */
}

.grid-content {
    border-radius: 4px;
    min-height: 150px;
}

.user-par-leftside {
    display: flex;
    align-items: center;
}

.user-main {
    display: flex;
    /* background-color: chocolate; */
    align-items: center;
    margin-left: 30px;
}

.user-right {
    margin: 0 20px;
}

.user-par-rightside {
    display: flex;
    align-items: center;
    float: right;
}

.user-rightside {
    width: 70px;
    height: 80px;
    /* background-color: cadetblue; */
    margin-right: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
</style>